<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue生命周期</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <center>
        <div id="app">
            <input type="text" v-model="num">
        </div>
    </center>
</body>
<script type="text/javascript">
    // 实例化vue对象
    let vm = new Vue({
        el: "#app",
        data: {
            num: null
        },
        // 创建之前
        beforeCreate(){
            console.log("创建Vue对象之前：beforeCreate()");
        },
        // 创建的时候
        created(){
            console.log("创建Vue的时候：created()");
        },
        // 挂载之前
        beforeMount(){
            console.log("即将挂载之前：beforeMount()");
        },
        // 挂载的时候
        mounted(){
            console.log("挂载的时候：mounted()");
        },
        // 修改DOM之前（数据发生变化之前）
        beforeUpdate(){
            console.log("数据发生变化之前：beforeUpdate()");
        },
        // 修改DOM的时候（数据改变时）
        updated(){
            console.log("数据改变时：updated()");
        },
        // 销毁对象之前
        beforeDestroy(){
            console.log("销毁对象之前：beforeDestroy()");
        },
        // 销毁对象的时候
        destroyed(){
            console.log("销毁对象的时候：destroyed()");
        }
    });
</script>
</html>